<template>
  <div class="page-content company-center">
    <div class="page-title">个人中心</div>
    <div class="content-box">
      <div class="company-info-line clearfix">
        <div class="front fl" style="margin-right: 20px;">账号：</div>
        <div class="behind fl">{{ info.account }}</div>
        <div class="fl action" @click="visibleModel1 = true">修改密码</div>
      </div>
      <div class="company-info-line clearfix">
        <div class="front fl" style="margin-right: 20px;">姓名：</div>
        <div class="behind fl">{{ info.name }}</div>
        <div class="fl action" @click="visibleModel2 = true">编辑</div>
      </div>
    </div>
    <a-modal
      v-model="visibleModel1"
      destroyOnClose
      :width="720"
      title="修改密码"
      @cancel="editPswCancel"
      @ok="editPswOk"
    >
      <div class="info">
        <div class="info-detail">
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>旧密码 : </span>
            </div>
            <div class="word fl">
              <input type="password" v-model="oldPwd" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>新密码 : </span>
            </div>
            <div class="word fl">
              <input type="password" v-model="newPwd" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>确认新密码 : </span>
            </div>
            <div class="word fl">
              <input type="password" v-model="rePwd" placeholder="请输入" />
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <a-modal v-model="visibleModel2" destroyOnClose :width="720" title="编辑" @ok="editNameOk">
      <div class="info">
        <div class="info-detail">
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>姓名 : </span>
            </div>
            <div class="word fl">
              <input type="text" maxlength="5" v-model="newName" placeholder="请输入" />
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      oldPwd: '',
      newPwd: '',
      rePwd: '',
      newName: '',
      visibleModel1: false,
      visibleModel2: false
    }
  },
  computed: {
    info() {
      return this.$store.state.userInfo
    }
  },
  created() {
    this.getUserInfo().then((res) => {
      this.newName = res.model.name
    })
  },
  methods: {
    ...mapActions(['getUserInfo']),
    editPswOk() {
      this.$http
        .put('/users/passwords', {
          oldPwd: this.oldPwd,
          newPwd: this.newPwd,
          rePwd: this.rePwd,
          sysType: this.$config.sysType
        })
        .then((res) => {
          if (res.success) {
            this.visibleModel1 = false
            this.$router.push({ name: 'login' })
            this.$message.success('修改成功')
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$message.error('修改失败')
        })
    },
    editPswCancel() {
      this.oldPwd = ''
      this.newPwd = ''
      this.rePwd = ''
      this.visibleModel1 = false
    },
    editNameOk() {
      if (this.newName) {
        this.$http
          .put('/platforms/platforms/names?name=' + this.newName)
          .then((res) => {
            if (res.success) {
              this.visibleModel2 = false
              this.info.name = this.newName
              this.$message.success('修改成功')
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(() => {
            this.$message.error('修改失败')
          })
      } else {
        this.$message.error('姓名不能为空')
      }
    }
  }
}
</script>

<style lang="less"></style>
